<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历  用于DOM树中遍历元素 【元素嵌套，父子级】
		 children()    功能：获取匹配元素集合中每个元素的子元素
		 parent()      功能：获取匹配元素集合中每个元素的父元素
		 
		 sibings()     功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()        功能：获取匹配元素集合中每个元素的所有下一个兄弟元素
		 prev()        功能：获取匹配元素集合中每个元素的所有上一个兄弟元素
		 
		 each()        功能：遍历匹配元素的集合--遍历所有子元素
		               语法糖：each(function)(index,element){
						   $(element).text(`${index}`)
						   注意：打印遍历的值 不可以使用单双引号+拼接
						   功能:获取到的元素，遍历元素内容
					   }
		            index 下标 element 元素 形参
		 -->
		 
		 <style>
			 .container{
				 
			 }
			 .box{
				 background-color: #ff0;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				 margin: 5px;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html  div.container 父级  6个div.box 每个#box1 子级
		           6个按钮
		    css    .container添加样式 边框1px 内外
		 -->
		 <div class="container">
		 	<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /* 1.点击  获取子元素 按钮 实现.container下所有子元素*/
			 $("#gc").click(function(){
				 //通过 父找子 函数--添加效果
				 $(".container").children().css("background-color","#aaffff")
			 });
			/* 2.点击  获取父元素 按钮 实现.container添加背景色*/
			$("#gp").click(function(){
				$("#box2").parent().css("background-color","#ffaaff")
			});
			/* 3.点击  获取兄弟元素 按钮 实现除了#box4 字体颜色不变 其他变色 */
			$("#gs").click(function(){
				$("#box4").siblings().css("color","aquamarine")
			});
			/* 4.点击  获取下一个兄弟元素 按钮 实现#box4 下一个兄弟 添加背景颜色 */
			$("#gn").click(function(){
				$("#box4").next().css("background-color","#aaff00");
			});
			/* 5.点击  获取上一个兄弟元素 按钮 实现#box6 上一个兄弟 添加添加效果
			                                  圆、背景图、背景色、盒子阴影
											  
			 */ 
			$("#gr").click(function(){
				$("#box6").prev().css({
					"width":"100px",
					"height":"100px",
					"background-color":"#ff0",
					"border-radius":"50%",
					"background-image":"url(../img/imgs/ios.png)",
					"box-shadow":"5px 5px 10px #ff0",
					"background-size":"100% 100%",
					"font-size":"0"
				});
			});
			/* 6.点击 遍历元素 按钮  实现每个盒子上 这是第几个盒子 */
			$("#loop").click(function(){
				
			//通过box 抓到第六个元素【一组集合】
			$(".box").each(function(i,e){
				//
				$(e).text(`这是${i+1}盒子`)
			});
			});
		 </script>
	</body>
</html>